<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按月统计分析</title>
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
<script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/static/highcharts4/js/highcharts.js"></script> 
<script type="text/javascript" src="/static/js/date.js"></script>
<script type="text/javascript">

	$(document).ready(function(){
	
		$("#s_begin").datebox("setValue",genLastYearStr().substring(0,7)); // 设置去年的年月
		$("#s_end").datebox("setValue",genTodayStr().substring(0,7)); // 设置当前年月
			
	});
	
	function search(){
		$('#dg').datagrid('loadData', { total: 0, rows: [] });  
	
		var chart=new Highcharts.Chart({
			chart: {
				renderTo:'container',
	            type: 'column',
	            events:{
	            	load:function(event){
	            		var begin=$("#s_begin").datebox("getValue");
	            		var end=$("#s_end").datebox("getValue");
	            		// ajax请求后台加载数据
	            		$.post("/admin/saleList/countSaleByMonth",{begin:begin,end:end},function(result){
	            			var rows=result.rows;
	            			var xArr=new Array();
	            			var yArr=new Array();
	            			for(var i=0;i<rows.length;i++){
	            				xArr.push(rows[i].date);
	            				yArr.push(rows[i].amountProfit);
	            				chart.xAxis[0].categories=xArr;
	            				chart.series[0].setData(yArr);
	            			}
	            			
	            			var saleTotal=0,costTotal=0,profitTotal=0;
	            			for(var i=0;i<rows.length;i++){
	            				var row=rows[i];
	            				$('#dg').datagrid('appendRow',{
	            					date:row.date,
	            					amountSale:row.amountSale,
	            					amountCost:row.amountCost,
	            					amountProfit:row.amountProfit
	            				});		
	            				saleTotal+=row.amountSale;
	            				costTotal+=row.amountCost;
	            				profitTotal+=row.amountProfit;
	            			}
	            			$('#dg').datagrid('appendRow',{
	            				date:"合计",
	            				amountSale:saleTotal,
	            				amountCost:costTotal,
	            				amountProfit:profitTotal
	            			});	
	            			
	            		},"json");
	            	}
	            }
	        },
	        title: {
	            text: '按月统计分析'
	        },
	        xAxis: {
	        	title:'月份',
	            categories: [
	                'A',
	                'B',
	                'C'
	            ]
	        },
	        yAxis: {
	            title: {
	                text: '销售利润'
	            }
	        },
	        series: [{
	            name: '销售利润',
	            data: [1,2,3]
	        }]
		});
		
		
	}
	
	function formatMoney(val,row){
		return "￥"+val.toFixed(2);
	}
	
	function myformatter(date){
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        return y+'-'+(m<10?('0'+m):m);
    }

	function myparser(s){
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[0],10);
        var m = parseInt(ss[1],10);
        var d = parseInt(ss[2],10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
            return new Date(y,m-1,d);
        } else {
            return new Date();
        }
    }
	
</script>
</head>
<body>
	<div style="height: 100px;padding: 10px;border: 0px;" >
		<fieldset style="border-color: #E7F0FF">
 			<legend>统计设置</legend>
 				<div style="padding: 5px">
 					统计月份：<input id="s_begin" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" editable=false  style="width:80px">
 					&nbsp;&nbsp;-&nbsp;&nbsp;
 					<input id="s_end" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"  editable=false  style="width:80px">
 					&nbsp;&nbsp;<a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
 				</div>
 			</form>
 		</fieldset>
	</div>
	
	<div style="padding-left: 10px;padding-right:10px;border: 0px;height: 350px" >
		    <div id="container"></div>
	</div>
	
	<div style="padding: 10px;border: 0px;height: 385px">
		<table id="dg"  class="easyui-datagrid" fit=true  
		   fitColumns="true"  rownumbers="true" singleSelect="true"
		      >
		   <thead>
		   	<tr>
		   		<th field="date" width="30" align="center">统计月份</th>
		   		<th field="amountSale" width="150" align="right" formatter="formatMoney">销售金额</th>
		   		<th field="amountCost" width="50" align="right" formatter="formatMoney">成本金额</th>
		   		<th field="amountProfit" width="50" align="right" formatter="formatMoney">盈利金额</th>
		   	</tr>
		   </thead>
		</table>
	</div>
   
	
</body>
</html>